<template>
  <div class="basic-info">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span>基础信息</span>
      </div>

      <el-form :model="formData" label-width="120px" class="basic-form" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务编号">
              <el-input v-model="formData.taskNo" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称">
              <el-input v-model="formData.taskName" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="formData.planName" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划序号">
              <el-input v-model="formData.planNo" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-input v-model="formData.startTime" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-input v-model="formData.endTime" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务类型">
              <el-input v-model="formData.taskType" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="formData.remark" :rows="4" placeholder="请输入备注">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-cardsb">
      <div slot="header" class="card-header">
        <span>设备信息</span>
      </div>

      <el-form :model="formData2" :rules="rules" ref="equipmentForm" label-width="120px" class="equipment-form"
        size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称" prop="equipmentName" required>
              <el-input v-model="formData2.equipmentName" placeholder="请输入设备名称">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="formData2.equipmentNo" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型">
              <el-input v-model="formData2.equipmentType" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input v-model="formData2.modelNo" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="存放位置">
              <el-input v-model="formData2.location" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用部门">
              <el-input v-model="formData2.department" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-cardchu">
      <div slot="header" class="card-header">
        <span>处理情况</span>
      </div>
      <el-form :model="formDatachu" :rules="ruleschu" ref="processForm" label-width="120px" class="process-form"
        size="small">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养开始时间">
              <el-date-picker v-model="formDatachu.startTime" type="datetime" placeholder="请选择时间" style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养结束时间">
              <el-date-picker v-model="formDatachu.endTime" type="datetime" placeholder="请选择时间" style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="保养总用时">
              <div class="time-input-group">
                <el-input v-model="formDatachu.hours" placeholder="请输入" style="width: 120px">
                </el-input>
                <span class="time-unit">小时</span>
                <el-input v-model="formDatachu.minutes" placeholder="请输入" style="width: 120px">
                </el-input>
                <span class="time-unit">分钟</span>
                <el-button type="success" size="small" @click="calculateTime">
                  计算
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养费用(元)">
              <el-input v-model="formDatachu.cost" type="number" placeholder="0.00">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="工作描述">
          <div class="work-description">
            <el-input type="textarea" v-model="formDatachu.description" :rows="4" placeholder="请输入">
            </el-input>
            <div class="upload-btn">
              <span @click="show">
                保养经验
              </span>
            </div>
          </div>
        </el-form-item>

      </el-form>
    </el-card>
    <!--保养人员-->
    <el-card class="box-cardren">
      <div slot="header" class="card-header">
        <span>保养人员</span>
      </div>

      <el-form :model="formDataren" label-width="120px" class="staff-form" size="small">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保养班组">
              <el-input v-model="formDataren.team" placeholder="请输入保养班组" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养负责人">
              <el-input v-model="formDataren.leader" placeholder="请输入保养负责人" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="其他保养人">
          <el-input v-model="formDataren.otherStaff" placeholder="请输入其他保养人" disabled>
          </el-input>
        </el-form-item>

      </el-form>
    </el-card>

    <!--工作量-->
    <el-card class="box-cardgong">
      <div slot="header" class="card-header">
        <span>工作量</span>
        <el-button type="text" class="add-person-btn" @click="handleAddPerson">
          添加人员
        </el-button>
      </div>

      <!-- 人员标签组 -->
      <div class="staff-tags">
        <el-tag v-for="(staff, index) in staffList" :key="index" :class="{ active: currentStaff === staff }"
          @click="selectStaff(staff)">
          {{ staff }}
        </el-tag>
      </div>

      <div class="operation-buttons">
        <el-button type="success" size="small" @click="handleAdd">添加</el-button>
        <el-button type="danger" size="small" plain @click="handleRemove">移除</el-button>
      </div>

      <!-- 工作量表格 -->
      <el-table :data="tableDatagong" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" style="color: #00B42A" @click="handleDelete(scope.$index)">
              移除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.startTime" type="datetime" placeholder="请选择时间" size="small"
              style="width: 100%">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="完成时间" width="180">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.endTime" type="datetime" placeholder="请选择时间" size="small"
              style="width: 100%">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="保养用时">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hours" style="width: 80px" size="small">
            </el-input>
            <span class="time-unit">小时</span>
            <el-input v-model="scope.row.minutes" style="width: 80px" size="small">
            </el-input>
            <span class="time-unit">分钟</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="暂停原因">
          <template slot-scope="scope">
            <el-input v-model="scope.row.reason" placeholder="请输入" size="small">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="保养内容">
          <template slot-scope="scope">
            <el-input v-model="scope.row.content" placeholder="请输入" size="small">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入" size="small">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <!-- 总用时统计 -->
      <div class="total-time">
        总用时：
        <span class="time-value">{{ totalHours }}</span> 小时
        <span class="time-value">{{ totalMinutes }}</span> 分钟
      </div>
    </el-card>

    <!--保养项目-->
    <el-card class="box-cardxiang">
      <div slot="header" class="card-header">
        <span>保养项目</span>
      </div>
      <div class="operation-bar">
        <el-button type="primary" size="small" plain @click="handleExportxiang">
          导出
        </el-button>
      </div>
      <el-table :data="tableDataxiang" style="width: 100%" @selection-change="handleSelectionChangexiang">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="item" label="保养项目" width="180" align="center">
        </el-table-column>
        <el-table-column prop="position" label="保养部位" width="180" align="center">
        </el-table-column>
        <el-table-column prop="level" label="保养等级" width="120" align="center">
        </el-table-column>
        <el-table-column prop="requirement" label="保养要求" width="120" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入" size="small">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.status" size="small">
              <el-radio-button label="done">已保养</el-radio-button>
              <el-radio-button label="pending">未保养</el-radio-button>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-cardjian">
      <div slot="header" class="card-header">
        <span>更换备件</span>
      </div>

      <el-form :model="formDatajian" label-width="120px" class="replacement-form">
        <el-form-item label="是否更换备件" required>
          <el-radio-group v-model="formDatajian.needReplacement">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!--上传照片-->
    <el-card class="box-cardzp">
      <div slot="header" class="card-header">
        <span>上传图片</span>
      </div>
      <div class="upload-tip">最多上传10张图片</div>
      <el-upload action="#" list-type="picture-card" :limit="10" :file-list="fileListzp" :on-preview="handlePreviewzp"
        :on-remove="handleRemovezp" :before-upload="beforeUploadzp" :http-request="customUploadzp" multiple>
        <i class="el-icon-plus"></i>
        <div class="upload-text">点击或将将图片拖拽到这里上传</div>
      </el-upload>

      <!-- 图片预览对话框 -->
      <el-dialog :visible.sync="dialogVisiblezp" append-to-body>
        <img width="100%" :src="dialogImageUrlzp" alt="">
      </el-dialog>
    </el-card>

    <el-dialog title="选择保养经验" :visible.sync="visible" width="80%" class="maintenance-experience-dialog">
      <div class="search-area">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="searchForm.keyword" placeholder="请输入保养经验条目名称或编码" size="small">
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-select v-model="searchForm.equipmentType" placeholder="请选择设备类型" size="small" style="width: 100%">
              <el-option v-for="item in equipmentTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="searchForm.maintenanceType" placeholder="请选择保养类别" size="small" style="width: 100%">
              <el-option v-for="item in maintenanceTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="searchForm.maintenanceUnit" placeholder="请选择保养部位" size="small" style="width: 100%">
              <el-option v-for="item in maintenanceUnits" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="6">
            <el-input v-model="searchForm.standard" placeholder="请输入保养标准" size="small">
            </el-input>
          </el-col>
          <el-col :span="18">
            <div class="search-buttons">
              <el-button type="default" size="small" @click="resetSearch">重置</el-button>
              <el-button type="success" size="small" @click="handleSearch">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table :data="tableDatabao" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="name" label="保养经验条目名称" min-width="180" align="center">
        </el-table-column>
        <el-table-column prop="code" label="保养经验条目编码" width="120" align="center">
        </el-table-column>
        <el-table-column prop="equipmentType" label="设备类型" width="120" align="center">
        </el-table-column>
        <el-table-column prop="maintenanceType" label="保养类别" width="120" align="center">
        </el-table-column>
        <el-table-column prop="maintenanceUnit" label="保养部位" width="120" align="center">
        </el-table-column>
        <el-table-column prop="standard" label="保养标准" min-width="200" align="center">
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="success" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BasicInfo',
  data() {
    return {
      //上传照片
      fileListzp: [],
      dialogImageUrlzp: '',
      dialogVisiblezp: false,
      formDatajian: {
        needReplacement: false
      },
      //项目
      tableDataxiang: [
        {
          index: 1,
          item: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          remark: '',
          status: 'pending'
        },
        {
          index: 2,
          item: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          remark: '',
          status: 'pending'
        },
        {
          index: 3,
          item: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          remark: '',
          status: 'pending'
        },
        {
          index: 4,
          item: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          remark: '',
          status: 'pending'
        },
        {
          index: 5,
          item: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          remark: '',
          status: 'pending'
        }
      ],
      selectedRowsxiang: [],
      //工作量
      staffList: ['选择雪', '李华', '张敏', '杨静', '赵磊'],
      currentStaff: '选择雪',
      tableDatagong: [],
      selectedRowsgong: [],
      totalHours: 0,
      totalMinutes: 0,
      //保养人员
      formDataren: {
        team: '油光清面班组',
        leader: '阎爱丝',
        otherStaff: '李华、张敏、杨静、赵磊'
      },
      //保养经验
      visible: false,
      searchForm: {
        keyword: '',
        equipmentType: '',
        maintenanceType: '',
        maintenanceUnit: '',
        standard: ''
      },
      equipmentTypes: [
        { value: '电机', label: '电机' },
        { value: '液压系统', label: '液压系统' },
        { value: '控制回板', label: '控制回板' }
      ],
      maintenanceTypes: [
        { value: '预防性保养', label: '预防性保养' },
        { value: '故障后保养', label: '故障后保养' },
        { value: '计划性保养', label: '计划性保养' }
      ],
      maintenanceUnits: [
        { value: '电机', label: '电机' },
        { value: '液压泵', label: '液压泵' },
        { value: '控制回板', label: '控制回板' }
      ],
      tableDatabao: [
        {
          index: 1,
          name: '清洁过滤器',
          code: 'BX001',
          equipmentType: '电机',
          maintenanceType: '预防性保养',
          maintenanceUnit: '电机',
          standard: '定期检查和更换滤清器'
        }
        // ... 更多数据
      ],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      selectedRows: [],
      //处理情况
      formDatachu: {
        startTime: '',
        endTime: '',
        hours: '',
        minutes: '',
        cost: '0.00',
        description: ''
      },
      ruleschu: {
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      //设备信息
      formData2: {
        equipmentName: '液压压机',
        equipmentNo: 'EQ001',
        equipmentType: '压力设备',
        modelNo: 'HY-1000',
        location: '车间A1',
        department: '制造部'
      },
      rules: {
        equipmentName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      },
      formData: {
        taskNo: 'T001',
        taskName: '润滑油更换',
        planName: '液压系统润滑保养计划',
        planNo: '02',
        startTime: '2022-07-18 08:00',
        endTime: '2022-07-18 10:00',
        taskType: '计划任务',
        remark: ''
      }
    }
  },
  methods: {
    //上传照片
    handleRemovezp(file, fileList) {
      this.fileListzp = fileList
      this.$emit('change', fileList)
    },
    handlePreviewzp(file) {
      this.dialogImageUrlzp = file.url
      this.dialogVisiblezp = true
    },
    beforeUploadzp(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }

      if (this.fileList.length >= 10) {
        this.$message.warning('最多只能上传10张图片!')
        return false
      }
      return true
    },
    customUploadzp(options) {
      const file = options.file
      // 这里应该实现实际的文件上传逻辑
      // 示例中使用本地预览
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const newFile = {
          name: file.name,
          url: reader.result
        }
        this.fileList.push(newFile)
        this.$emit('change', this.fileList)
      }
    },
    //保养项目
    handleSelectionChangexiang(val) {
      this.selectedRowsxiang = val
    },
    handleExportxiang() {
      // 实现导出功能
      console.log('导出数据')
    },
    //工作量
    handleAddPerson() {
      // 实现添加人员的逻辑
    },
    selectStaff(staff) {
      this.currentStaff = staff
    },
    handleAdd() {
      this.tableData.push({
        index: this.tableData.length + 1,
        type: '负责人',
        startTime: '',
        endTime: '',
        hours: '',
        minutes: '',
        reason: '',
        content: '',
        remark: ''
      })
    },
    handleRemove() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要移除的记录')
        return
      }
      const selectedIds = this.selectedRows.map(row => row.index)
      this.tableData = this.tableData.filter(row => !selectedIds.includes(row.index))
      this.updateIndexes()
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
      this.updateIndexes()
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    updateIndexes() {
      this.tableData.forEach((row, index) => {
        row.index = index + 1
      })
      this.calculateTotalTime()
    },
    calculateTotalTime() {
      let totalMinutes = 0
      this.tableData.forEach(row => {
        if (row.hours && row.minutes) {
          totalMinutes += parseInt(row.hours) * 60 + parseInt(row.minutes)
        }
      })
      this.totalHours = Math.floor(totalMinutes / 60)
      this.totalMinutes = totalMinutes % 60
    },
    //保养经验
    show() {
      this.visible = true
    },
    handleSearch() {
      // 实现搜索逻辑
      console.log('搜索条件：', this.searchForm)
    },
    resetSearch() {
      this.searchForm = {
        keyword: '',
        equipmentType: '',
        maintenanceType: '',
        maintenanceUnit: '',
        standard: ''
      }
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新加载数据
    },
    handleCancel() {
      this.visible = false
      this.resetSearch()
    },
    handleConfirm() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }
      this.$emit('confirm', this.selectedRows)
      this.visible = false
      this.resetSearch()
    },
    //处理情况
    calculateTime() {
      if (this.formData.startTime && this.formData.endTime) {
        const start = new Date(this.formData.startTime)
        const end = new Date(this.formData.endTime)
        const diff = end - start

        if (diff < 0) {
          this.$message.error('结束时间不能早于开始时间')
          return
        }

        const hours = Math.floor(diff / (1000 * 60 * 60))
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

        this.formData.hours = hours.toString()
        this.formData.minutes = minutes.toString()
      } else {
        this.$message.warning('请先选择开始和结束时间')
      }
    },
    // 表单验证方法
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.equipmentForm.validate((valid) => {
          if (valid) {
            resolve(this.formData2)
          } else {
            reject('表单验证失败')
          }
        })
      })
    }
  }
}

</script>

<style scoped>
.box-cardzp {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.box-cardjian {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.image-upload {
  padding: 20px;
}

.upload-tip {
  color: #909399;
  font-size: 14px;
  margin-bottom: 20px;
}

.upload-text {
  color: #909399;
  font-size: 12px;
  text-align: center;
  margin: 8px 0;
}

:deep(.el-upload--picture-card) {
  width: 200px;
  height: 200px;
  line-height: 200px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 200px;
  height: 200px;
}

/* 自定义上传按钮样式 */
:deep(.el-upload--picture-card:hover) {
  border-color: #00B42A;
  color: #00B42A;
}

.box-cardxiang {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}


.box-cardgong {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.workload-record {
  padding: 20px;
}

.maintenance-items {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.el-radio-button--small .el-radio-button__inner {
  padding: 7px 12px;
}

.el-radio-group .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 12px 0 0 12px;
}

.el-radio-group .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 12px 12px 0;
}

.el-radio-button__inner {
  border: 1px solid #DCDFE6;
}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background-color: #00B42A;
  border-color: #00B42A;
  box-shadow: -1px 0 0 0 #00B42A;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-person-btn {
  color: #00B42A;
}

.staff-tags {
  margin-bottom: 15px;
}

.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.el-tag.active {
  background-color: #00B42A;
  border-color: #00B42A;
  color: #fff;
}

.operation-buttons {
  margin-bottom: 15px;
}

.time-unit {
  margin: 0 10px;
}

.total-time {
  margin-top: 15px;
  text-align: right;
  font-size: 14px;
}

.time-value {
  color: #00B42A;
  font-weight: bold;
  margin: 0 5px;
}

.maintenance-staff {
  padding: 20px;
}

.box-cardren {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.staff-form {
  padding: 20px 0;
}

.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #F5F7FA;
}

.processing-status {
  padding: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.process-form {
  padding: 20px 0;
}

.time-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-unit {
  color: #606266;
  margin: 0 5px;
}

.work-description {
  position: relative;
}

.upload-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.basic-info {
  padding: 20px;
}

.box-cardchu {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.box-cardsb {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.box-card {
  width: 1200px;
  margin-left: 25px;
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.basic-form {
  padding: 20px 0;
}

.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #F5F7FA;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .basic-info {
    padding: 10px;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  .el-col {
    width: 100% !important;
  }

  .el-form-item__label {
    float: none;
    display: block;
    text-align: left;
    padding: 0 0 8px;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
